<template>
    <div>
        <q-dialog ref="dialog"  position="right" @hide="onDialogHide">
            <div class="add-detail bg-white q-dialog-plugin q-pa-sm">
                <div class=" profile-head    ">
                    <div class="row">
                        <div class="col">
                            <div class="text-h6">
                                <q-icon name="perm_identity" size="25px"/>
                                详情
                            </div>
                        </div>
                        <div class="col-auto ">
                            <q-btn flat round icon="close" @click="hide"/>
                        </div>
                    </div>
                    <div class="row">
                    </div>

                </div>
                <q-separator spaced/>
                <div class="row profile-body ">
                    <q-scroll-area class="profile-scroll-detail q-pa-sm" :thumb-style="thumbStyle">
                        <ProfileInfo :userInfo="userInfo"/>
                    </q-scroll-area>

                </div>
                <q-btn class="bg-green float-right" color="white" flat label="添加" @click="onOKClick"/>
            </div>
        </q-dialog>
    </div>


</template>

<script>
  import ProfileInfo from './user-info/userInfo.vue'
  export default {
    name: "indexTwo",
    components:{ProfileInfo},
    props:{
      accountDetailShow:{
        type:Boolean,
        default:false
      },
      userInfo:Object
    },
    data(){
      return {

      }
    },
    methods:{
      onOKClick () {
        this.accountDetailShow = true
      },
      onDialogHide () {
        // QDialog发出“hide”事件时
        // 需要发出
        this.$emit('hide')
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "show")
      show () {
        this.$refs.dialog.show()
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "hide")
      hide () {
        this.$refs.dialog.hide()
      },
    },
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#4caf50',
          width: '1px',
          opacity: 0.75
        }
      }
    }
  }
</script>

<style scoped>
    .profile-scroll-add {
        height: 49vh;
        width: 100%;
    }

    .profile-scroll-add {
        min-height: 30vh;
        width: 100%;
    }

    .profile-scroll-detail {
        min-height: 70vh;
        width: 100%;
    }

    .q-dialog-plugin::-webkit-scrollbar { /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }


    .add-detail {
        /*min-height: 400px;*/
        min-height: 80vh;
        width: 300px;
    }

    .profile-head {
        height: 10%;
    }

    .profile-body {
        height: 90%;
        width: 100%;
    }
</style>
